<template>
  <nav :class="['mobile-nav', { 'search-open': isSearchOpen }]">
    <ul>
      <li>
        <router-link to="/">主页</router-link>
      </li>
      <li>
        <router-link to="/channel">频道</router-link>
      </li>
      <li>
        <router-link to="/profile">我的</router-link>
      </li>
      <li>
        <button @click="isSearchOpen = !isSearchOpen">
          {{ isSearchOpen ? '关闭' : '搜索' }}
        </button>
      </li>
    </ul>
    <input 
      v-if="isSearchOpen"
      type="text" 
      placeholder="搜索..." 
      v-model="searchQuery" 
      @keyup.enter="handleSearch"
    />
  </nav>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import '../assets/MobileNavbar.css';
import { useRouter } from 'vue-router'; // 如果你需要在搜索后跳转页面，可以使用这个

// 定义搜索框展开状态，初始为 false
const isSearchOpen = ref(false);
// 定义搜索查询词
const searchQuery = ref('');

// 处理搜索逻辑
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    // 这里可以添加实际的搜索逻辑，比如调用 API
    console.log('执行搜索，搜索词: ', searchQuery.value);
    // 搜索完成后可以选择关闭搜索框
    isSearchOpen.value = false;
    searchQuery.value = '';
  }
};
</script>